<template>
  <div class="Reg">
    <h2>新用户注册</h2>
    <input type="button" value="×" @click="back" class="back" />
    <ul>
      <li>
        <span class="phone">+86</span>
        <input
          type="text"
          name="username"
          id="phone"
          placeholder="请输入手机号码"
          v-model="userName"
          v-on:change="checkphone"
        />
      </li>
      <li>
        <input
          type="password"
          name="userpass"
          id="pwd"
          placeholder="设置密码"
          v-model="passWord"
          v-on:change="checkpass"
        />
      </li>
      <li>
        <input
          id="submit"
          type="submit"
          value="立即注册"
          @click="RegSave"
          :class="style"
          :disabled="style.abled"
        />
      </li>
      <li>
        <a @click="login">已有账号？点击登录</a>
      </li>
    </ul>
    <div class="tips" :style="{opacity:opacity}"><p>{{msg}}</p></div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "Banner",
  data() {
    return {
      tipsarr:["请检查手机格式是否正确,必须是1开头的手机号,长度必须够11位","请检查密码格式是否正确，长度至少6位","注册失败，账号已存在，请登录",],
      msg:'',
      flag:true,
      namearr:[],
      opacity:0,
      style: {
        backgroundColor: "red",
        abled: true,
      },
      userName: "",
      passWord: "",
    };
  },
  methods: {
    checkphone() {
      let resphone = /^1[0-9]{10}$/;
      if (resphone.test(this.userName)) {
        return true;
      } else {
        this.msg = this.tipsarr[0];
        this.fade();
        return false;
      }
    },
    checkpass() {
      let regChar = /^[a-zA-Z]+$/;
      let regNum = /^\d+$/;
      let regOther = /^[!@#$]$/;
      let _regChar = /[a-zA-Z]+/;
      let _regNum = /\d+/;
      let _regOther = /[!@#$]/;
      if (this.passWord.length >= 6) {
        if (
          regChar.test(this.passWord) ||
          regNum.test(this.passWord) ||
          regOther.test(this.passWord)
        ) {
          this.check();
        } else if (
          _regChar.test(this.passWord) &&
          _regNum.test(this.passWord) &&
          _regOther.test(this.passWord)
        ) {
          this.check();
        } else {
          this.check();
        }
        return true;
      } else {
        this.msg = this.tipsarr[1];
        this.fade();
        return false;
      }
    },
    check() {
      if (this.checkphone() == true && this.passWord != "") {
        this.style = {
          backgroundColor: "red",
          abled: false,
        };
        return true;
      } else {
        this.style = {
          backgroundColor: "red",
          abled: true,
        };
        return false;
      }
    },
    RegSave() {
      console.log('进入判断了');
      axios({
        url: "http://localhost:3000/VIPS",
        method: "get",
        data: {},
      })
      .then((res) => {
        console.log('正在判断');
        for(let i = 0 ;i < res.data.length;i++){
          this.namearr.push(res.data[i].userName);
        }
        if (this.namearr.indexOf(this.userName) != -1) {
          this.msg = this.tipsarr[2];
          this.fade();
          this.flag = false;
        }else{
          this.flag = true;
        }
        console.log(this.flag);
        if(this.flag == true){
          console.log('进入注册了');
          axios({
            url: "http://localhost:3000/VIPS",
            method: "post",
            data: {
              userName: this.userName,
              passWord: this.passWord
            },
          })
          .then((res) => {
            console.log('正在注册');
            console.log(res);
              this.login();
          })
        }
      })
    },
    back() {
      this.$router.push("/");
    },
    login() {
      this.$router.push("/login");
    },
    fade(){
      this.opacity = 1
      setTimeout(()=>{
        this.opacity = 0
      },2000)
    }
  },
  
};
</script>

<style scoped>
h2 {
  text-align: center;
  line-height: 0.4rem;
  margin-bottom: 0.1rem;
}
input {
  outline: none;
}
input[type="button"] {
  border: none;
  outline: none;
}
.back {
  border: none;
  position: absolute;
  top: 0.1rem;
  left: 0.1rem;
  background-color: #fff;
  font-size: 24px;
}
ul {
  list-style: none;
  width: 2.3rem;
  margin: 0 auto;
  margin-top: 0.4rem;
}
ul li {
  text-align: center;
  margin-bottom: 0.3rem;
  height: 0.4rem;
}
ul li .phone {
  float: left;
  width: 0.6rem;
  height: 0.4rem;
  font-size: 0.16rem;
  line-height: 0.4rem;
  border: 1px solid #ccc;
  color: gray;
  text-align: center;
  border-right: none;
}
ul li input {
  float: left;
  width: 2.3rem;
  height: 0.4rem;
  line-height: 0.4rem;
  font-size: 0.16rem;
  outline: none;
  color: gray;
  text-indent: 0.16rem;
  border: 1px solid #ccc;
}
#phone {
  width: 1.67rem;
}
#code {
  float: left;
  width: 1.2rem;
}
#get {
  float: left;
  width: 1rem;
}
#submit {
  background-color: #ff1901;
  color: #fff;
}
a {
  text-decoration: none;
  color: blue;
}
.tips{
  position: fixed;
  left: 50%;
  top: 65%;
  transform: translate(-50%,-50%);
  width: 2.5rem;
  height: .7rem;
  text-align: center;
  background-color: #ccc;
}
.tips p{
  position: absolute;
  left: 50%;
  top: 55%;
  transform: translate(-50%,-50%);
  text-align: center;
  background-color: #ccc;
  color: #444;
  font-size: 12px;
  width: 100%;
}
</style>
